import React, {Component} from 'react'
import {
    View,
    StyleSheet,
    Text,
    Image,

} from 'react-native'
import CommonItem from "./CommonItem";

var Dimensions = require('Dimensions')
var {width} = Dimensions.get('window')

export default class TopAdsView extends Component {
    constructor(props) {
        super(props)
        this.state = {
            leftData: [],
            rightData: []
        }
        this.fetchData()
    }

    fetchData() {
        fetch('http://localhost:8081/localdata/HomeTopMiddleLeft.json')
            .then((response) => response.json())
            .then((responseJson) => {
                this.setState({
                    leftData: responseJson.dataLeft[0],
                    rightData: responseJson.dataRight,
                })

            })
            .catch((error) => {
                console.error(error);
            });

    }

    render() {
        return (
            <View style={styles.container}>
                {/* 左侧广告 */}
                {this.renderLeftView()}
                {/* 右侧广告 */}

                <View style={styles.rightContainer}>
                    {this.renderRightView()}
                </View>
            </View>
        )
    }

    renderLeftView() {
        return (
            <View style={styles.leftAdsComtainer}>
                <Image style={{height: 21, width: 64}}
                       source={{uri: 'http://localhost:8081/imgs/' + this.state.leftData.img1 + '.png'}}/>
                <Image style={{height: 35, width: 55, marginTop: 3}}
                       source={{uri: 'http://localhost:8081/imgs/' + this.state.leftData.img2 + '.png'}}/>
                <Text style={{fontSize: 18, color: '#ccc'}}>{this.state.leftData.title}</Text>
                <View style={{flexDirection: 'row', marginTop: 3, alignItems: 'center'}}>
                    <Text style={{fontSize: 14, color: 'green'}}>{this.state.leftData.price}</Text>
                    <Text style={{
                        marginLeft: 3,
                        fontSize: 14,
                        color: 'red',
                        backgroundColor: 'yellow',
                        padding: 3
                    }}>{this.state.leftData.sale}</Text>
                </View>
            </View>
        )
    }

    renderRightView() {
        var itemArr = []
        var items = this.state.rightData
        for (var i = 0; i < items.length; i++) {
            itemArr.push(
                <CommonItem
                    key={i}
                    title={items[i].title}
                    subTitle={items[i].subTitle}
                    image={items[i].rightImage}
                    titleColor={items[i].titleColor}
                />
            )
        }
        return itemArr
    }

    dealWithUrl(url) {
        // if(url.includes('w.h')){
        //     return url;
        // }else{
        return url.replace('w.h', '120.90');
        // }
    }
}

const styles = StyleSheet.create({
    rightContainer: {
        marginLeft:1,
        width: (width - 1) / 2,
        flexWrap: 'wrap'
    },
    leftAdsComtainer: {
        width: (width - 1) / 2,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff'
    },
    container: {
        height: 140,
        flexDirection: 'row',
        marginTop: 10
    }
})